<template>
	<view class="user-info_wrapper">
		<view class="form_list">
			<view class="form_item" @click="uploadAvatar">
				<view class="item_left">头像</view>
				<view class="item_right">
					<image :src="userAvatar" class="item_avatar"></image>
					<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/arrowRight.svg" class="handle_right"></image>
				</view>
			</view>
			<view class="form_item" @click="openChangeNameDialog">
				<view class="item_left">昵称</view>
				<view class="item_right">
					<text>{{userNickname}}</text>
					<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/arrowRight.svg" class="handle_right"></image>
				</view>
			</view>
			<view class="form_item">
				<view class="item_left">手机号</view>
				<view class="item_right item_right-phone">{{mobile | filterMobile}}</view>
			</view>
		</view>
		
		<wx-dialog :showDialog="showChangeNameDialog" direction="center">
			<template v-slot:dialogContent>
				<view class="dialog_wrap">
					<view class="dialog_title">修改昵称</view>
					<view class="dialog_content">
						<input type="text" v-model="newUserName" placeholder="请输入2~8位昵称" />
					</view>
					<view class="handle_wrap">
						<button type="warn" class="dialog_btn" @click="onChangeNameDialog('confirm')">确认</button>
						<button class="dialog_btn cancel_btn" @click="onChangeNameDialog('cancel')">取消</button>
					</view>
				</view>
			</template>
		</wx-dialog>
	</view>
</template>

<script>
	import wxDialog from "@/components/wx-dialog/wx-dialog.vue"
	export default{
		data(){
			return{
				showChangeNameDialog:false, 	//修改名字对话框状态
				newUserName:'', 				// 新的用户昵称
				userAvatar:'',					// 用户头像
				userNickname:'',				// 用户昵称					
				mobile:""						// 用户手机
			}
		},
		onReady() {
			this.getUserInfo();
		},
		filters:{
			filterMobile:function(string){
				return string.substr(0,3)+'＊＊＊＊'+string.substr(7,4)
			}
		},
		methods:{
			// 上传头像
			uploadAvatar(){
				var that = this;
				uni.chooseImage({
					count:1,
					success(res) {
						console.log(res)
						uni.uploadFile({
							url:that.$api.getApiUrl()+'/avatar_upload', //上传接口
							filePath: res.tempFilePaths[0],
							name: 'file', 
							formData: {
								'img': res.tempFilePaths[0]
							},
							header: {
								'content-type': 'multipart/form-data',
								'AUTHORIZATION': uni.getStorageSync('user_token')
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes);
								// console.log(JSON.parse(uploadFileRes.data));
								// console.log(that.userAvatar,picUrl,uploadFileRes.data.message);
								const picUrl = JSON.parse(uploadFileRes.data).message;
								that.userAvatar = picUrl;
							}
						});
					}
				})
			},
			// 打开修改昵称对话框
			openChangeNameDialog(){
				this.showChangeNameDialog = true
			},
			// 修改昵称事件
			onChangeNameDialog(param){
				if(param === 'confirm'){
					if(this.newUserName === ''){
						uni.showToast({
							title:'请输入昵称'
						})
						return
					}
					if(this.newUserName.length < 2 || this.newUserName.length > 8){
						uni.showToast({
							title:'请输入2~8位昵称'
						});
						return
					}
					this.$api.changeUserInfo({nickname:this.newUserName},res => {
						if(res.data.type == 'ok'){
							uni.showToast({
								title:res.data.message
							})
							this.getUserInfo();
						}
					})
					this.showChangeNameDialog = false
					this.newUserName = ''
				}else{
					this.showChangeNameDialog = false
					this.newUserName = ''
				}
			},
			
			// 获取用户信息
			getUserInfo(){
				this.$api.getUserInfo({}, res => {
					if (res.data.type == 'ok') {
						let result = res.data.message
						this.userAvatar = result.baseInfo.avatar
						this.userNickname = result.baseInfo.nickname
						this.mobile = result.baseInfo.mobile
					}
				})
			}
		},
		components:{
			wxDialog
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex-layout{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
	}
	
	.user-info_wrapper{
		padding:30upx;
	}

	.form_list {
		box-shadow:0px 1px 1px 0px rgba(6,0,1,0.07);
		border-radius:10upx;
		overflow: hidden;
		.form_item{
			position: relative;
			padding:30upx;
			@include flex-layout;
			.item_left{
				// color:#E03E4D;
			}
			.item_right{
				@include flex-layout;
				text{
					font-size: 14px;
				}
				.handle_right{
					width:20upx;
					height: 20upx;
					margin-left:20upx;
				}
			}
			.item_right-phone{
				margin-right:40upx;
			}
			.item_avatar{
				width: 100upx; 
				height: 100upx;
				border: 1upx solid rgba(51,51,51,0.1);
				border-radius: 50%;
			}
		}
		.form_item:after{
		    content:"";
			position:absolute;
		    bottom:0;
		    left:0;
		    right:0;
		    border-top:1px solid rgba(0,0,0,0.1);
		    -webkit-transform:scaleY(.5);
		    -webkit-transform-origin:0 0;
		}
		.form_item:last-child:after{
		    display: none;
		}
	}
	.change-name_dialog{
		min-height: 90upx;
		padding:20upx 50upx;
		input{
			height:60upx;
			text-align: center;
			padding:0 10upx;
			border-bottom:1px solid #E0DFDF;
		}
	}
	
	.dialog_wrap {
		width:80%;
		background-color:#FFFFFF;
		margin:0 auto;
		border-radius: 10upx;
		overflow: hidden;
		.dialog_title {
			position: relative;
			height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
		}
		.dialog_title:after{
		    content:"";
			position:absolute;
		    bottom:0;
		    left:0;
		    right:0;
		    border-top:1px solid rgba(0,0,0,0.1);
		    -webkit-transform:scaleY(.5);
		    -webkit-transform-origin:0 0;
		}
	
		.dialog_content {
			padding: 0 40upx;
			margin: 40upx 0;
	
			input {
				position: relative;
				height: 50upx;
				padding: 0 10upx;
			}
			input:after{
				content:"";
				position:absolute;
				bottom:0;
				left:0;
				right:0;
				border-top:1px solid rgba(0,0,0,0.1);
				-webkit-transform:scaleY(.5);
				-webkit-transform-origin:0 0;
			}
	
		}
	
		.handle_wrap{
				display: flex;
				justify-content: space-between;
				margin:42upx 0 37upx 0;
				.dialog_btn{
					width:43%;
					height: 70upx;
					line-height: 70upx;	
					border-radius: 70upx;
					background-color: #E03E4D;
					font-size: 14px;
				}
				.cancel_btn{
					border:1px solid #E03E4D;
					background-color: #FFFFFF;
					color:#E03E4D;
				}
			}
	}
</style>
